let vm = new Vue({
    el: "#app",
    data: {
        name: "", // 商品名
        count: 0, // 购物车数量
        cname: "", // 商品类别名
        value: false, // 设置为true时只有一页数据时隐藏分页栏
        tabIndex: 0, // tab选项卡下标
        isLogin: false, // 当前是否有用户登录
        requestUrl: "", // 请求路径
        categoryId: "", // 商品类型id
        // 分页相关参数：开始----------
        pageSize: 10, // 每页记录数
        currentPage: 1, // 当前是第几页
        pageSizes: [10, 20, 50, 100],
        total: 10, // 总记录数
        orderBy: "id", // 排序规则
        orderBys: ["id", "price", "sale_count"], // 自定义排序字段数组
        // 分页相关参数：结束-----------
        user: {}, // 登录用户的信息
        products: [], // 所有商品
        recommends: [], // 新品推荐
        categoryArr: [] // 全部商品类型
    },
    created: function () {
        // ?category_id=1
        // ?name=葡萄
        // 获取地址栏请求参数
        let param = location.search.split("=");
        let page = this.currentPage;
        let size = this.pageSize;

        // 根据参数设置请求路径
        if (param[0] === "?name") { // 参数为商品名
            this.name = param[1];
            this.requestUrl = "/product/selectByPage?page=" + page + "&size=" + size + "&name=" + param[1];
        } else if (param[0] === "?category_id") { // 参数为商品类型id
            this.categoryId = param[1];
            this.requestUrl = "/product/selectByPage?page=" + page + "&size=" + size + "&categoryId=" + param[1];
        } else {
            this.requestUrl = "/product/selectByPage?page=" + page + "&size=" + size;
        }

        // 获取商品列表
        axios.get(this.requestUrl).then(function (response) {
            let result = response.data;

            vm.total = result.total;
            vm.products = result.rows;
        });

        // 查询新品
        axios.get("/product/selectNew").then(function (response) {
            vm.recommends = response.data;
        });

        // 获取登录的用户信息
        axios.get("/user/getlogin").then(function (response) {
            vm.user = response.data;
            vm.isLogin = response.data !== "";
        });

        // 获取全部商品分类
        axios.get("/category/selectAll").then(function (response) {
            vm.categoryArr = response.data;
        });

        // 获取购物车里的商品数量
        axios.get("/shop_cart/selectCount").then(function (response) {
            vm.count = response.data;
        });
    },
    methods: {
        set(category_id) { // 点击商品类型，根据类别id重新查询商品
            let index = parseInt(category_id) - 1;

            vm.categoryId = category_id;
            vm.cname = vm.categoryArr[index].name;

            this.select();
        },
        setTab(index) { // 点击tab根据不同字段排序
            vm.tabIndex = index;
            vm.orderBy = vm.orderBys[index];

            this.select();
        },
        toCart(product_id) { // 商品添加到购物车
            axios.post("/shop_cart/insert", {
                productId: product_id
            }).then(function (response) {
                let result = response.data;

                if (result.code === 200) {
                    // 重新获取购物车里的商品数量
                    axios.get("/shop_cart/selectCount").then(function (response) {
                        vm.show_count = response.data;
                    });
                } else {
                    this.$message.error(result.msg);
                }
            });
        },
        select() { // 查询商品数据
            axios.get("/product/selectByPage", {
                params: {
                    name: vm.name,
                    size: vm.pageSize,
                    orderBy: vm.orderBy,
                    page: vm.currentPage,
                    categoryId: vm.categoryId
                }
            }).then(function (response) {
                let result = response.data;

                vm.total = result.total;
                vm.products = result.rows;
            });
        },
        logout() { // 退出登录
            axios.get("/user/logout").then(function (response) {
                let result = response.data;

                if (result.code === 200) {
                    location.href = "/login.html";
                } else {
                    alert(result.msg);
                }
            });
        },
        handleSizeChange(val) {
            vm.pageSize = val;

            this.select();
        },
        handleCurrentChange(val) {
            vm.currentPage = val;

            this.select();
        }
    }
});